import React from "react";
import { Row, Col, Spin, message } from "antd";
import { messages } from "share/common";
import errorMessage from "share/errorMessage";
import get from "lodash/get";
import arrowImg from "images/personal-setting/arrow.png";
import travelService from "containers/request/travel-request/travel.service";
import "styles/request/travel-request/travel-rfp-list.scss";

class TravelRfpList extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false,
    };
  }

  handleOpen = (item) => {
    this.setState({ loading: true });
    const isArrpove = get(window, "location.pathname").indexOf("approve") > -1;
    const params = {
      newVendorsName: "zhenxuan_flight",
      direction: "web",
      pageType: 1002,
      businessCode: item.businessCode,
      vendorType: 2001,
      rfpId: item.id,
    };
    travelService
      .getNewOutUrl(params)
      .then((res) => {
        let outSsoURL = res.data.url ? res.data.url : "";
        outSsoURL = outSsoURL.concat(
          `&pageType=${isArrpove ? "RfpDetailQuery" : "RfpDetail"}&businessCode=${item.businessCode}&rfpId=${item.id}`
        );
        if (!res.data || !res.data.url) {
          message.error(messages("request-1.key615") /*行程未配置有效访问地址。*/);
        }
        this.setState({ loading: false });
        if (outSsoURL) {
          window.open(outSsoURL);
        }
      })
      .catch((err) => {
        this.setState({ loading: false });
        errorMessage(err.response);
      });
  };

  render() {
    const { flightList } = this.props;
    return (
      <div className="rfp-flight-list">
        {flightList.map((item) => {
          return (
            <Spin spinning={this.state.loading}>
              <div className="rfp-itinerary" onClick={() => this.handleOpen(item)}>
                <div className="header" align="middle" justify="space-between">
                  <div className="status-box">
                    <span className="status">{item.statusDesc}</span>
                  </div>
                  <div className="info">
                    <div className="date">
                      {item.queryTime}&nbsp;{messages("request-1.key932") /*发起询价*/}
                    </div>
                    <div className="number">
                      {messages("request-1.key933") /*流水号：*/}
                      {item.id}
                    </div>
                  </div>
                </div>
                <div className="container">
                  {item.supplierQuotationSchemeVos &&
                    item.supplierQuotationSchemeVos.map((flight) => {
                      return (
                        <div className="content">
                          <div>
                            <div className="time-limit">
                              {messages("request-1.key934") /*最晚确认时间：*/}
                              {flight.latestConfirmDate}
                            </div>
                            {flight && flight.selectedScheme && (
                              <div className="scheme-selected">
                                {messages("request-1.key935") /*已选择：*/}
                                {flight.selectedScheme}
                              </div>
                            )}
                            {flight &&
                              flight.supplierQuotationSchemeJourneys &&
                              flight.supplierQuotationSchemeJourneys.map((trip, index) => {
                                return (
                                  <div className="trip-item">
                                    <div className="summary">
                                      <span className="index">
                                        {messages("request-1.key290") /*行程*/}
                                        {index + 1}&nbsp;&nbsp;
                                      </span>
                                      <span className="city">{trip.departureCityName}&nbsp;</span>
                                      <span className="arrow">&rarr;&nbsp;</span>
                                      <span className="city">{trip.arrivalCityName}</span>
                                    </div>
                                    <div className="detail">
                                      {trip.flightNo}&nbsp;|&nbsp;{trip.departureDate}&nbsp;-&nbsp;{trip.arrivalDate}
                                    </div>
                                  </div>
                                );
                              })}
                            <Row align="middle" justify="space-between">
                              <Col span={12} className="passenger">
                                {messages("request-1.key936") /*乘机人：*/}
                                {item.passengerVos.map((passenger) => {
                                  return <span>{passenger.passengerName}&nbsp;</span>;
                                })}
                              </Col>
                              {item.totalAmount && (
                                <Col span={12} className="amount">
                                  {messages("request-1.key950") /*总额： */} CNY &nbsp;{item.totalAmount.toFixed(2)}
                                </Col>
                              )}
                            </Row>
                          </div>
                          <div>
                            <img className="right-arrow" src={arrowImg} />
                          </div>
                        </div>
                      );
                    })}
                </div>
              </div>
            </Spin>
          );
        })}
      </div>
    );
  }
}

TravelRfpList.propTypes = {
  flightList: React.PropTypes.array,
};

TravelRfpList.defaultProps = {
  flightList: [],
};

export default TravelRfpList;
